<template>
  <div class="header">
    <div class="site-topbar">
      <div class="container">
        <div class="topbar-nav">
          <div class="nav-item" v-for="(nav, index) in navs" :key="nav">
            <a href="javascript:;">{{ nav }}</a>
            <span v-if="index !== navs.length - 1" class="sep">|</span>
          </div>
        </div>
        <div class="topbar-cart">
          <a href="javascript:;">购物车（0）</a>
          <div class="cart-meun">
            <div class="menu-content">购物车中还没有商品，赶紧选购吧！</div>
          </div>
        </div>
        <div class="topbar-info">
          <div class="info-item" v-for="(info, index) in infos" :key="info">
            <a href="javascript:;">{{ info }}</a>
            <span v-if="index !== infos.length - 1" class="sep">|</span>
          </div>
        </div>
      </div>
    </div>
    <div class="site-header">
      <div class="container">
        <div class="header-logo">
          <a href="javasceipt:;" title="小米官网" class="logo"></a>
        </div>
        <div class="header-nav">
          <ul class="nav-list clearfix">
            <li class="nav-item" @mouseover="mouseoverEvent(index, '1')" @mouseout="mouseoutEvent1" v-for="(item, index) in headerNavs" :key="index">
              <a href="javascript:;" class="link">
                <span class="text">{{ item.name }}</span>
              </a>
              <div class="item-children" v-if="item.children && index !== 0">
                <div class="container">
                  <ul class="children-list clearfix">
                    <li v-for="(children, index) in item.children" :key="index">
                      <a href="javascript:;">
                        <div class="figure">
                          <img :src="children.url" :alt="children.info" width="160" height="110">
                        </div>
                        <div class="title">{{ children.info + children.info2 ? children.info2 : '' }}</div>
                        <div v-if="children.price" class="price">{{ children.price + '元' }}</div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="site-category" v-if="index === 0">
                <ul class="site-category-list clearfix site-category-list-custom">
                  <li class="category-item" v-for="(category, index) in item.children" :key="index">
                    <a href="javascript:;" class="title" ref="title" @mouseover="mouseoverChildren(index)" @mouseout="mouseoutChildren">
                      {{ category.name }}
                      <em>></em>
                    </a>
                    <div :class="['children', 'clearfix', `children-col-${category.children.length}`]" @mouseover="mouseoverChildren(index)" @mouseout="mouseoutChildren">
                      <ul class="children-list children-list-col children-list-col-1" v-for="(children, index) in category.children" :key="index">
                        <li v-for="(list, index) in children" :key="index">
                          <a href="javascript:;" class="clearfix">
                            <img :src="list.url" alt="" class="thumb">
                            <span class="text">{{ list.info }}</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <div class="header-search clearfix">
          <input class="search-text" type="search">
          <input class="search-btn" type="submit" value="搜索">
          <div class="search-hot-words fade-in">
            <a href="javascript:;">小米9 Pro 5G</a>
            <a href="javascript:;">Redmi Note 8</a>
          </div>
        </div>
      </div>
      <div @mouseover="mouseoverEvent(index, '2')" @mouseout="mouseoutEvent2" class="header-nav-menu slide-up" ref="header-nav-menu">
        <div class="container">
          <ul class="children-list clearfix">
            <li v-for="(item, index) in children" :key="index">
              <a href="javascript:;">
                <div class="figure">
                  <img :src="item.url" :alt="item.info">
                </div>
                <div class="title">{{ item.info}}<br/>{{ item.info2 }}</div>
                <div v-if="item.price" class="price">{{ item.price + '元' }}</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'headers',
  data () {
    return {
      flag1: true,
      flag2: true,
      index: 0,
      navs: [
        '小米商城',
        'MIUI',
        'loT',
        '云服务',
        '金融',
        '有品',
        '小爱开放平台',
        '企业团购',
        '资质证照',
        '协议规则',
        '下载app',
        'Select Location'
      ],
      infos: [
        '登录',
        '注册',
        '消息通知'
      ],
      headerNavs: [
        {
          name: '全部商品',
          children: [
            {
              name: '手机 电话卡',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '腾讯黑鲨游戏手机3'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1631ce0bdbbd86918e516412f49de13.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '腾讯黑鲨游戏手机3 Pro'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d622e8a81f81caa0f619ee750cf64501.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米10 Pro'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7a4f24061860901f724b6ba6d75fd9.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米10'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b2b8b609aab05d9ad184bbe5c8e8be28.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi K30 4G'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a98170e97ca5df8f5ad2470a8a2d01e.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi K30 5G'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/74bb2ad7cb8b3707d8fd9d596e1866e2.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米CC9 Pro'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi 8A'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/47057d897ee2c05c9215e059e1308dc6.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi 8'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1e8be88112405471cee2c18ae0f1f62d.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米MIX Alpha'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ee5503ee5b2be373525e36309d922f8.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米9 Pro 5G'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/cba27e53367b74271a38a4515a692816.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi Note 8 Pro'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4534b9fd22f478314f3cbbf286b7338.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi Note 8'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2b0d7d2c85734b80a1b8d1a4100c9c1f.png?thumb=1&w=40&h=40',
                    info: '小米CC9'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/20e23b306f50384ab85b6658f5c963ff.jpg?thumb=1&w=40&h=40',
                    info: '小米CC美图定制版'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d3ee15816d2ccbe922172033c3c3941.png?thumb=1&w=40&h=40',
                    info: '小米CC9e'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/85d746207b997873ddfcdca0da025f78.jpg?thumb=1&w=40&h=40',
                    info: 'Redmi 7A'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5c483e65040470208823a8bfb5d73c27.jpg?thumb=1&w=40&h=40',
                    info: '移动4G+专区'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/dafced4abb82c502c087a2aca7078f48.jpg?thumb=1&w=40&h=40',
                    info: '小米移动 电话卡'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/84e19ece0125992449a6276e2ba333e9.png?thumb=1&w=40&h=40',
                    info: '手机上门维修'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ade0163e9fdbd92a4b7d7ee3aeab905.jpg?thumb=1&w=40&h=40',
                    info: '云服务空间月卡'
                  }
                ]
              ]
            },
            {
              name: '电视 盒子',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米电视5 55英寸'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8264eb9b900ead63eea69f6fc1e413a.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米电视5 65英寸'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d707cdac2a19703b57e65212f32fd25b.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米电视5 75英寸'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/942d4f28d406f3946f0ce551c125c641.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米电视5 Pro 55英寸'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d096389e19ba6b79b324b7d0acfab7ca.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米电视5 Pro 65英寸'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/da1680fb62238cb5b01998d80fc34e25.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米电视5 Pro 75英寸'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4c6f98e59f3e78eb5d959bbcff081562.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi 红米电视 70英寸'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/18c9d79b3d6c6635c55ba1bb371182af.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '全面屏电视Pro 65英寸'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a3aff2c5e8207dafd8fc3bfad5a2e21.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '全面屏电视Pro 55英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5732e8f317eb86bfcb174fbb49d00c4a.jpg?thumb=1&w=40&h=40',
                    info: '小米壁画电视 65英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8aeae36f5d088f22c84b8953bd0d08b4.jpg?thumb=1&w=40&h=40',
                    info: '小米全面屏电视'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/820cba6c44f7263c5fe773a7ffaf85b9.png?thumb=1&w=40&h=40',
                    info: '小米电视4A 32英寸'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ea8be80c82c273e167d5b282b17e9b2b.png?thumb=1&w=40&h=40',
                    info: '小米电视4A 43英寸青春版'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a9710af2fff5548ea05950473898ef0e.jpg?thumb=1&w=40&h=40',
                    info: '小米电视4A 49英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2f15dd9779865b48bfa8c8e915ac75ac.png?thumb=1&w=40&h=40',
                    info: '小米电视4A 50英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37ce1615e1e8fcbbda2b3f37c09ec676.png?thumb=1&w=40&h=40',
                    info: '小米电视4A 55英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/11e4d06f29877044ddce0f9fdd2e26d5.png?thumb=1&w=40&h=40',
                    info: '小米电视4A 58英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ca8058c9c776447265b99420ff04e544.png?thumb=1&w=40&h=40',
                    info: '小米电视4A 65英寸'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/cb83515483547404cd26a962bada5d5b.png?thumb=1&w=40&h=40',
                    info: '小米电视4C 32英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/af572c503ed2a81ab71e2810617860c5.jpg?thumb=1&w=40&h=40',
                    info: '小米电视4C 40英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7bef124bc015669bdacf76d5d4b02a7e.png?thumb=1&w=40&h=40',
                    info: '小米电视4C 43英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/24ee18218b3b98161e17abe23c6fd539.png?thumb=1&w=40&h=40',
                    info: '小米电视4C 50英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fe603cc3b9c19903be14aac4e9b571d6.jpg?thumb=1&w=40&h=40',
                    info: '小米电视4C 55英寸'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/53f3593ab87d90c4cc5201e10a5c42f7.png?thumb=1&w=40&h=40',
                    info: '小米电视4X 43英寸'
                  }
                ]
              ]
            },
            {
              name: '笔记本 显示器 平板',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/aee86bcd8bf491eb78ae234d2e188a66.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'RedmiBook 13'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4f45cdc4f94f1f1651095dedb154c2e4.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米笔记本 15.6"'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1f95bb7c9206951e3d870cb5581b8329.png?thumb=1&w=40&h=40',
                    info: '小米笔记本 13.3"'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/eaab0db21859e0e58cae1fb807907905.jpg?thumb=1&w=40&h=40',
                    info: '小米笔记本 12.5"'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a3c149225946312f2b4bbe1263f65450.png?thumb=1&w=40&h=40',
                    info: 'RedmiBook 14'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a66c24ee8ae2efea3ae92ec455a27352.jpg?thumb=1&w=40&h=40',
                    info: '小米游戏本'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b32e4db4b53b0c56c6040f094e96d945.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '显示器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/131e5d409e62eedb94577cae11c530f1.jpg?thumb=1&w=40&h=40',
                    info: '小米平板4'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0eb7e33b11443f6927e2035eca7c3d9e.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '键鼠套装'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c61933e7ac89c61bc727c275391e82e0.png?thumb=1&w=40&h=40',
                    info: '鼠标'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e18c5807226399f5b24b340241fe8cc1.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '转接器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/32bfcdebff3058de7bc0b2855d05c240.jpg?thumb=1&w=40&h=40',
                    info: '平板配件'
                  }
                ]
              ]
            },
            {
              name: '家电 插线板',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/abeb200aaaee68d4635c6235d3ffb3f3.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '冰箱'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/96de94415b860f3de95b2d6294f0d0fd.png?thumb=1&w=40&h=40',
                    info: '立式空调'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/630b9e523bb2e1387ce6c7be1edaca18.png?thumb=1&w=40&h=40',
                    info: '壁挂空调'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/18723c3561252ce76c9a1b1eebc4c01c.png?thumb=1&w=40&h=40',
                    info: '滚筒洗衣机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d3bace6e62cecb7901e306b05502535f.jpg?thumb=1&w=40&h=40',
                    info: 'Redmi全自动波轮洗衣机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/12f4b26ced3716d07bfcc6beba751188.jpg?thumb=1&w=40&h=40',
                    info: '净水器'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7dcbb8c268574041ce0b4b98e591cf1.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '微波炉'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7f39b7ac49227fc59c3f2b2105d25d6.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '电烤箱'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/603beb09930e32addd1b362bf43c7ac2.jpg?thumb=1&w=40&h=40',
                    info: '扫地机器人'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/26deda5474eb7eb7e5b34547c58b9893.jpg?thumb=1&w=40&h=40',
                    info: '吸尘器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e997ed31cd5199ec0a24eeb48a37b1e7.jpg?thumb=1&w=40&h=40',
                    info: '空气净化器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/390e15818dd103b2f96f4ac742d47379.jpg?thumb=1&w=40&h=40',
                    info: '电饭煲'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d93e6a98403262a506c9e9b22293cdae.jpg?thumb=1&w=40&h=40',
                    info: '电磁炉'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/39c8ccbebd08687bc6780373b7ef2a95.jpg?thumb=1&w=40&h=40',
                    info: '电水壶'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9ffcebcacca008ed2d92a692f7312ef6.jpg?thumb=1&w=40&h=40',
                    info: '滤水壶'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3a3e4238b70ef8db89ae77f8a3762fc8.png?thumb=1&w=40&h=40',
                    info: '落地风扇'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c12fd1da9fed662842d6f5c57d7737c9.png?thumb=1&w=40&h=40',
                    info: '投影仪'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c0a6b523433a492dbf32035b2983d98e.jpg?thumb=1&w=40&h=40',
                    info: '灯具'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d1c8cfb055709db380c6de981a4c894b.jpg?thumb=1&w=40&h=40',
                    info: '插线板'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1cc417a7cae8c4ff8b0041fa29003717.jpg?thumb=1&w=40&h=40',
                    info: '新风机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6aa1871d84aaae98cd676f5e2cf5c2f2.jpg?thumb=1&w=40&h=40',
                    info: '电暖器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ba8d2a2d383f612575d323ce159bdce3.jpg?thumb=1&w=40&h=40',
                    info: '电压力锅'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/0bf0ba35dc3ad57115c59f0ebde0fd1d.jpg?thumb=1&w=40&h=40',
                    info: '料理机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b7de8a5bc64975df73f5fde5507fc8d1.jpg?thumb=1&w=40&h=40',
                    info: '电煮壶'
                  }
                ]
              ]
            },
            {
              name: '出行 穿戴',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3cc76c2ce836255c1b2e3e1cf477cfef.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米手表'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4dd7eeff34b478acd2cf3eec99b78c96.png?thumb=1&w=40&h=40',
                    info: '手环手表'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fece041c17bdebaab5f3a9313c7c0f8c.jpg?thumb=1&w=40&h=40',
                    info: 'VR'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/50180b158690a40f9cbc684c7646d297.jpg?thumb=1&w=40&h=40',
                    info: '平衡车'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4e9da27ebbeeb38078910c97173c4671.jpg?thumb=1&w=40&h=40',
                    info: '滑板车'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/749c779fd3789ba94033da8aaa547dcd.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '自行车'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/787c807176455f9ae40146af11e98b1e.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '车载充电器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ac5b263aac2ffa1894fb7b215c3ce87.jpg?thumb=1&w=40&h=40',
                    info: '平衡车配件'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/971c8c01a246c7ac69a4c9be9e77e832.jpg?thumb=1&w=40&h=40',
                    info: '智能后视镜'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e2748064a9ac9969e53851479d55f1a9.jpg?thumb=1&w=40&h=40',
                    info: '智能记录仪'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/efd04d4a90822e7e2f04a365083f2607.jpg?thumb=1&w=40&h=40',
                    info: '无线车充'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8b398bad185dddb5397f2c0d9a3f6271.jpg?thumb=1&w=40&h=40',
                    info: '充气宝'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6d92b9db10f261f56b2f2dfb93ca132e.jpg?thumb=1&w=40&h=40',
                    info: '平衡轮'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f941386e72f745b02e8921b6c8055cd6.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '石英表'
                  }
                ]
              ]
            },
            {
              name: '智能 路由器',
              children: [
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5ef6c2d63df78e140afab6ac3c088fac.jpg?thumb=1&w=40&h=40',
                    info: '打印机'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b1c8b0308b1591ab93b7fe0937a52427.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '喷墨打印机'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a18e471294cf49b6937ae90fac6d583.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '喷墨打印机墨水'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4670a965ac5f0dd32689e06c27cea78f.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小米路由器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/14107363b5dc77b18e9983bda999931d.jpg?thumb=1&w=40&h=40',
                    info: '智能家庭'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/21fedf7ba9019bce59cbc4856f907076.jpg?thumb=1&w=40&h=40',
                    info: '对讲机'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=40&h=40',
                    info: '摄像机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/81d89cfdb72d0445ed4ef19942d9dedb.jpg?thumb=1&w=40&h=40',
                    info: '照相机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4fb7885d49255b93f7245aa53501294c.jpg?thumb=1&w=40&h=40',
                    info: '智能门锁'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/feaab5bd13257dbe8f30b80b6a4472be.jpg?thumb=1&w=40&h=40',
                    info: '视频门铃'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/90b75c1046e486c19f14effd9b45f488.png?thumb=1&w=40&h=40',
                    info: '小爱老师'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/51eacc66512a31713808a60b5695ae28.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi路由器'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d5963e212402fa5ebd2e71dd10c426c.jpg?thumb=1&w=40&h=40',
                    info: '小爱音箱'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/7646993f6c382fb32ebd9bfda8ba6158.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '云服务空间年卡'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/7646993f6c382fb32ebd9bfda8ba6158.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '云服务空间月卡'
                  }
                ]
              ]
            },
            {
              name: '电源 配件',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8c55361386a46857f962e5142baeefcf.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '移动电源'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/45dd7a2c4fc3d17d5d261ed3eed7cd15.jpg?thumb=1&w=40&h=40',
                    info: '数据线'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/397d8119508e8e3c895fc30ece88e799.jpg?thumb=1&w=40&h=40',
                    info: '车充'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/864bcd18999a7b0fe22365f7ea7909e0.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '充电器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/10ec831749f1c657fc0a494feab15ed4.jpg?thumb=1&w=40&h=40',
                    info: '电池'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2725e04c955dc060ac142fabbf809c1e.jpg?thumb=1&w=40&h=40',
                    info: '自拍杆'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5c6e60e48edf17219724faad95963b93.jpg?thumb=1&w=40&h=40',
                    info: '手机壳'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e9e248c899fd895c9267f494ea1aaebf.jpg?thumb=1&w=40&h=40',
                    info: '手机贴膜'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/27074367aa02371a3c3c417c41195346.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '无线充电器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6ce8ff4bc1e6ded2d40c53b2aa83b98c.jpg?thumb=1&w=40&h=40',
                    info: '平板配件'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9c3ead590f49767a4f562b7285215f5e.jpg?thumb=1&w=40&h=40',
                    info: '黑鲨配件'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/57d9989807dbc15c1a82bc49acc1f06f.jpg?thumb=1&w=40&h=40',
                    info: '其他配件'
                  }
                ]
              ]
            },
            {
              name: '健康 儿童',
              children: [
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/da43c3dd6b171ee267f1fd1ec01b9208.jpg?thumb=1&w=40&h=40',
                    info: '洗手机'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/96b5d738ce5926e3a6969ad68fa1521d.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '修剪器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/60d7bdf307ceaba08b3275246ad3ab53.jpg?thumb=1&w=40&h=40',
                    info: '剃须刀'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/320c12a501b40fa1d69d0ca3a4303129.jpg?thumb=1&w=40&h=40',
                    info: '日光镜'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/15447769c461fdc71e84a7badb83f09b.jpg?thumb=1&w=40&h=40',
                    info: '牙刷'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bba7ce79f4d61939c69b7a26bf507bae.jpg?thumb=1&w=40&h=40',
                    info: '吹风机'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/459afd0eb2a3bc6313e7ac62bd3a52df.png?thumb=1&w=40&h=40',
                    info: '体重秤'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fe6166ca2026008abb86bc67dfd8211d.jpg?thumb=1&w=40&h=40',
                    info: '体脂秤'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2cb10391d6527bf64126a63446a38e2e.jpg?thumb=1&w=40&h=40',
                    info: '早教启智'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ab36232a1004421e1a5b3efd0b9226c0.jpg?thumb=1&w=40&h=40',
                    info: '遥控电动'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c9a5feb1f6c9b9aa0dc998c17e5eb3e9.jpg?thumb=1&w=40&h=40',
                    info: '益智积木'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0b3a592784632760a7ef25de50147a7.jpg?thumb=1&w=40&h=40',
                    info: '儿童手表'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9f6a34ed8071b821ee5aa8d32a7be95d.jpg?thumb=1&w=40&h=40',
                    info: '儿童滑板车'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/12235daeb49fd45e709e68c7dacd3336.jpg?thumb=1&w=40&h=40',
                    info: '婴儿推车'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d55c8943ceac7cd5ac7d8aa052f69b93.jpg?thumb=1&w=40&h=40',
                    info: '儿童书包'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/17d625c8b5466b9527e9c06c71601939.jpg?thumb=1&w=40&h=40',
                    info: '婴儿理发器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/81737be7672dfa85cbb3abc65669f091.jpg?thumb=1&w=40&h=40',
                    info: '儿童保温杯'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4bf92a8a492f692a81794f52fefd1a29.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '健身车'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fb1fee7e2f2963baae34d3611a2b7e9f.jpg?thumb=1&w=40&h=40',
                    info: '走步机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ccdce424f41806f775693748058fa2ca.jpg?thumb=1&w=40&h=40',
                    info: '点读笔'
                  }
                ]
              ]
            },
            {
              name: '耳机 音箱',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/360215a1e32317abb912d48c3e80dd20.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '音箱 Pro '
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/374ce749560e0e74a792b6222048a472.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小爱音箱'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d5963e212402fa5ebd2e71dd10c426c.jpg?thumb=1&w=40&h=40',
                    info: '小米小爱音箱 Play版'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8b3d235f4a5a5bf5c9d8d066d2166e6c.jpg?thumb=1&w=40&h=40',
                    info: '线控耳机'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/aa9306bdfc7cfa595462f87404430258.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '蓝牙耳机'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/28a77451da1dbd0d3e42d529777997c3.jpg?thumb=1&w=40&h=40',
                    info: '头戴耳机'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4885bda69e45b870a5bcf5bbaea1548b.jpg?thumb=1&w=40&h=40',
                    info: '品牌耳机'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e8b89fb3702dc7c41248898f2b86f6d.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '蓝牙音箱'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/db89d422ef877cf7290616fef515e413.jpg?thumb=1&w=40&h=40',
                    info: '小米AI音箱'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4df2fa022495e79f890a943a9d7e70a5.jpg?thumb=1&w=40&h=40',
                    info: '小米小爱音箱HD'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a290d924c1bbd1e3ce64e96f497d4059.jpg?thumb=1&w=40&h=40',
                    info: 'k歌耳机'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/dacef871b6af373b0212e28b028890b8.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: 'Redmi音箱'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/abe665fafbef94eb3626ae8baf1de97e.jpg?thumb=1&w=40&h=40',
                    info: '小爱触屏音箱'
                  }
                ]
              ]
            },
            {
              name: '生活 箱包',
              children: [
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f26030d7d914b86daca51233a3ac5f9.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '小背包'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f628feba0f2f8253f9cc41f9984194a7.jpg?thumb=1&w=40&h=40',
                    info: '双肩包'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2846c64ffd97969c639979da9bb97974.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '胸包'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c5138635ef1396e35856ec942e3b6c0.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '旅行箱'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e899d08e36c306570d4fe3c75df90a42.jpg?thumb=1&w=40&h=40',
                    info: '运动鞋'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d521bd58668f66c50562b8fa8949f67c.jpg?thumb=1&w=40&h=40',
                    info: '眼镜'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/aba45662667dceaf4ba0e5b08f44d3a7.jpg?thumb=1&w=40&h=40',
                    info: '床垫'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/744306b95df4d130bdfc346ff2b3c871.png?thumb=1&w=40&h=40',
                    info: '枕头'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8e9bc4f84825f80ce520eefa4f762939.jpg?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '饰品'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/458169c8138413666feb860068ce1a56.jpg?thumb=1&w=40&h=40',
                    info: '螺丝刀'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/813d173eff50a83abb8abd5abde5f5a6.jpg?thumb=1&w=40&h=40',
                    info: '保温杯'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/395ffd04841f70b8bdf67339ba1dfc98.jpg?thumb=1&w=40&h=40',
                    info: '伞'
                  }
                ],
                [
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/59d3a701ac0bbb78f1b1d0ea7ebc7505.jpg?thumb=1&w=40&h=40',
                    info: '驱蚊器'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2cb85b96b12395fdaa7bccaf8f94e758.jpg?thumb=1&w=40&h=40',
                    info: '尤克里里'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/21c3ec8638dd75f5c54f1a69864a1cc9.jpg?thumb=1&w=40&h=40',
                    info: '毛巾/浴巾'
                  },
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ac95ad25bb8f6391abcb937b03c1743.png?thumb=1&w=40&h=40&f=webp&q=90',
                    info: '米兔'
                  },
                  {
                    url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c9279a17e9399958420af64e449e3214.jpg?thumb=1&w=40&h=40',
                    info: '笔'
                  }
                ]
              ]
            }
          ]
        },
        {
          name: '小米手机',
          children: [
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '小米10Pro',
              price: '4999'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '小米10',
              price: '3999'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/be92bc4baa572bf467fc9e881fd4be2a.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '小米CC9 Pro',
              price: '2599'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/41c566d825a3ae3b5751a78d4c7cffdb.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '小米9 Pro 5G',
              price: '3699'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f515ab05232ed14ccd78ec67e024495a.png?thumb=1&w=160&h=110',
              info: '小米CC9',
              price: '1499'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/df9b3e7a562e02a33eb069b3f0119815.png?thumb=1&w=160&h=110',
              info: '小米CC9 e',
              price: '1299'
            }
          ]
        },
        {
          name: 'Redmi 红米',
          children: [
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/cff2977b8aab1e43b94b2f00083f4ae1.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi k30',
              price: '1699'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/742a328bdaa242aea89ec2a9c8661013.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi k30 5G',
              price: '1999'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/398311b2e6f47ac324ba0421a0ac1b80.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi 8A',
              price: '599'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/dacd6a3d8440b7a038e9778702bd6db6.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi Note 8',
              price: '899'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a9734e0314fec470ff6912a8a92da5e6.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi Note 8 Pro',
              price: '1299'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a9734e0314fec470ff6912a8a92da5e6.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi 8',
              price: '699'
            }
          ]
        },
        {
          name: '电视',
          children: [
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6917267948c54c647d2009a98637aac6.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi 红米电视 70英寸 R70A',
              price: '3299'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/00f597a8725eee9245e383c35cd4f7b6.jpg?thumb=1&w=160&h=110',
              info: '小米壁画电视 65英寸',
              price: '6999'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a40904b6a053b73b631a152334388d0e.jpg?thumb=1&w=160&h=110',
              info: '小米全面屏电视E55A',
              price: '1799'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8f4e22f6d591825f8f150b3309c750b.png?thumb=1&w=160&h=110',
              info: '小米电视4A 32英寸',
              price: '699'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bf72a3e9a6e799cb71ecfa7d80465351.jpg?thumb=1&w=160&h=110',
              info: '小米电视4A 55英寸',
              price: '1699'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bd922870295a97a0972eaba5af92129e.jpg?thumb=1&w=160&h=110',
              info: '小米电视4A 65英寸',
              price: '2599'
            }
          ]
        },
        {
          name: '笔记本',
          children: [
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6abc701fb3cf48f2c7a3fd5ef053529a.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'RedmiBook 13',
              price: '4499'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d712f71b3c4a3b562601c2b956a660ad.png?thumb=1&w=160&h=110',
              info: '小米笔记本Pro 15',
              price: '5699'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a25f895ad6019c3fae32fd1f48a2c7c.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'RedmiBook 14',
              price: '4299'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/33c6a31aaee90164ce963801bec48e64.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '游戏本2019款',
              price: '7499'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bb159dbe860ee434b52d8eed9e9fd424.png?thumb=1&w=160&h=110',
              info: '小米笔记本 15.6"',
              price: '3799'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/95c4329ce2c454e2a5fa1e0931528a46.png?thumb=1&w=160&h=110',
              info: '小米笔记本Air 12.5"',
              price: '3299'
            }
          ]
        },
        {
          name: '家电',
          children: [
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/03dc85cd792904ddc8027b2d781beed8.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '米家互联网空调C1（一级能效）',
              price: '1999'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e06b219c5bced9256467b17738a943c6.png?thumb=1&w=160&h=110',
              info: '米家互联网空调（一级能效）',
              price: '1999'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c5d772b7c2a159c3ed7d4e31bd293f18.jpg?thumb=1&w=160&h=110',
              info: 'Redmi全自动波轮洗衣机1A',
              price: '799'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/11b8bca444aba2994fe852993eac9203.png?thumb=1&w=160&h=110',
              info: '米家互联网洗烘一体机10kg',
              price: '1999'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/486a2a7359b6bda95b3dbd4e45b9c50a.jpg?thumb=1&w=160&h=110',
              info: '小米净水器',
              price: '1299'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4ae019eebf10a55f8df2fee8d19b4e1f.jpg?thumb=1&w=160&h=110',
              info: '米家扫地机器人',
              price: '1399'
            }
          ]
        },
        {
          name: '路由器',
          children: [
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/359d3c63cc159949d8fe147a11b4bc40.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '小米AIoT路由器AX3600',
              price: '599'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/aa1e0a4860cf40d34e1192d86691c82c.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi路由器AC2100',
              price: '169'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5dd23c09b7eb6471968537fdce629194.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: '小米路由器AC2100',
              price: '229'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ec5be5f93ac0118aeec27b8df4337fc9.jpg?thumb=1&w=160&h=110',
              info: '小米路由器 Mesh',
              price: '999'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/026a28fc18eff2cfa4d26a799a2da9cc.jpg?thumb=1&w=160&h=110',
              info: '小米路由器4A 千兆版',
              price: '129'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/28efac56ef4c4942077dac7e30e8c624.jpg?thumb=1&w=160&h=110',
              info: '小米路由器 4C',
              price: '59'
            }
          ]
        },
        {
          name: '智能硬件',
          children: [
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2a500be4264c692899b25d86c16403f7.jpg?thumb=1&w=160&h=110',
              info: '小米米家智能摄像机云台版',
              price: '179'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e3fb0886fdb13e5ae784b9713b9a0038.jpg?thumb=1&w=160&h=110',
              info: '小米小爱老师',
              price: '449'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5630aa997c82409ee33b2814c7eb2244.jpg?thumb=1&w=160&h=110',
              info: '小米米家智能门锁',
              price: '1299'
            },
            {
              url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f6e585a4bf5c0f744ca60f19ecd6fadf.jpg?thumb=1&w=160&h=110',
              info: '小米小爱触屏音箱',
              price: '199'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/17c0c91317ec0def3ecc072fa9480192.png?thumb=1&w=160&h=110&f=webp&q=90',
              info: 'Redmi小爱音箱 Play',
              price: '79'
            },
            {
              url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff1254137246a22ad9eba80bd1c454c5.jpg?thumb=1&w=160&h=110&f=webp&q=90',
              info: '查看全部',
              info2: '智能硬件'
            }
          ]
        },
        {
          name: '服务'
        },
        {
          name: '社区'
        }
      ],
      children: []
    }
  },
  methods: {
    mouseoverEvent (sum, string) {
      if (sum === 0) return
      this.index = sum
      this.headerNavs.forEach((item, index) => {
        if (index === this.index) {
          if (!item.children) {
            this.$refs['header-nav-menu'].classList.add('slide-up')
            this.$refs['header-nav-menu'].classList.remove('slide-down')
            this.$refs['header-nav-menu'].classList.remove('header-nav-menu-active')
          } else {
            if (string === '1') {
              this.flag1 = false
            } else {
              this.flag2 = false
            }
            this.$refs['header-nav-menu'].classList.add('slide-down')
            this.$refs['header-nav-menu'].classList.remove('slide-up')
            this.$refs['header-nav-menu'].classList.add('header-nav-menu-active')
            this.children = item.children
          }
        }
      })
    },
    mouseoutEvent1 () {
      this.flag1 = true
    },
    mouseoutEvent2 () {
      this.flag2 = true
    },
    mouseoverChildren (index) {
      this.$refs.title[index].style.backgroundColor = '#ff6700'
    },
    mouseoutChildren () {
      this.$refs.title.forEach(item => {
        item.style.backgroundColor = 'transparent'
      })
    }
  },
  computed: {
    flag () {
      const { flag1, flag2 } = this
      return {
        flag1,
        flag2
      }
    }
  },
  watch: {
    flag: {
      handler (newval, oldval) {
        if (newval.flag1 && newval.flag2) {
          this.$refs['header-nav-menu'].classList.add('slide-up')
          this.$refs['header-nav-menu'].classList.remove('slide-down')
          this.$refs['header-nav-menu'].classList.remove('header-nav-menu-active')
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  .site-topbar {
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background-color: #333;
    .container {
      &::before,
      &::after {
        content: '';
        display: table;
      }
      &::after {
        clear: both;
      }
      .topbar-nav {
        float: left;
        height: 40px;
        line-height: 40px;
        .nav-item {
          float: left;
          a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            &:hover {
              text-decoration: none;
              color: #fff;
            }
          }
          .sep {
            margin: 0 .3em;
            color: #424242;
          }
        }
      }
      .topbar-cart {
        position: relative;
        float: right;
        width: 120px;
        height: 40px;
        margin-left: 15px;
        font-size: 12px;
        a {
          position: absolute;
          width: 120px;
          z-index: 31;
          display: block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #b0b0b0;
          background-color: #424242;
          &:hover {
            text-decoration: none;
            color: #ff6700;
            background-color: #fff;
            & + .cart-meun {
              height: 100px;
            }
          }
        }
        .cart-meun {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          right: 0;
          top: 40px;
          z-index: 1;
          width: 316px;
          height: 0;
          transition: height .3s;
          color: #424242;
          background-color: #fff;
          box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
          overflow: hidden;
        }
      }
      .topbar-info {
        position: relative;
        float: right;
        height: 40px;
        line-height: 40px;
        .info-item {
          float: left;
          a {
            padding: 0 5px;
            text-align: center;
            color: #b0b0b0;
            line-height: 40px;
            display: block;
            float: left;
            &:hover {
              text-decoration: none;
              color: #fff;
            }
          }
          .sep {
            color: #424242;
          }
        }
      }
    }
  }
  .site-header {
    position: relative;
    background-color: #fff;
    .container {
      &::before,
      &::after {
        content: '';
        display: table;
      }
      &::after {
        clear: both;
      }
      .header-logo {
        float: left;
        width: 62px;
        margin-top: 22px;
        .logo {
          display: block;
          position: relative;
          width: 55px;
          height: 55px;
          overflow: hidden;
          background-color: #ff6700;
          &::before {
            transform: translateZ(0);
            background: url(//s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat 50% 50%;
            opacity: 1;
          }
          &::before,
          &::after {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 55px;
            height: 55px;
            content: '';
            transform-origin: 50% 50%;
            transition: all .2s;
            transform: translateZ(0);
          }
          &::after {
            background: url(//s02.mifile.cn/assets/static/image/mi-home.png) no-repeat 50% 50%;
            opacity: 0;
            margin-left: -55px;
          }
          &:hover::before,
          &:hover::after {
            transform: translate3d(55px, 0, 0);
          }
          &:hover::after {
            opacity: 1;
          }
          &:hover::before {
            opacity: 0;
          }
        }
      }
      .header-nav {
        float: left;
        width: 850px;
        .nav-list {
          position: relative;
          z-index: 10;
          float: left;
          width: 1100px;
          height: 88px;
          margin: 0;
          padding: 12px 0 0 30px;
          list-style-type: none;
          font-size: 16px;
          .nav-item {
            float: left;
            .link {
              display: block;
              padding: 28px 10px 44px;
              color: #333;
              transition: color .2s;
              &:hover {
                text-decoration: none;
                color: #ff6700;
              }
            }
            &:first-child {
              position: relative;
              width: 127px;
              padding-right: 15px;
              .link {
                display: block;
                padding: 28px 0 44px;
                text-align: center;
                color: #333;
                visibility: hidden;
              }
              .site-category {
                display: block;
                position: absolute;
                top: 88px;
                left: -92px;
                z-index: 999;
                width: 234px;
                height: 460px;
                font-size: 14px;
                .site-category-list {
                  margin: 0;
                  padding: 20px 0;
                  list-style-type: none;
                  .category-item {
                    .title {
                      position: relative;
                      display: block;
                      padding-left: 30px;
                      height: 42px;
                      line-height: 42px;
                      &:hover {
                        text-decoration: none;
                        background-color: #ff6700;
                        & + .children {
                          display: block;
                        }
                      }
                      em {
                        position: absolute;
                        top: 12px;
                        right: 20px;
                        font-size: 16px;
                        line-height: 16px;
                        font-weight: 700;
                        color: #e0e0e0;
                      }
                    }
                    .children {
                      display: none;
                      position: absolute;
                      left: 234px;
                      top: 0;
                      z-index: 24;
                      height: 458px;
                      border: 1px solid #e0e0e0;
                      border-left: 0;
                      background-color: #fff;
                      box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
                      &:hover {
                        display: block;
                      }
                      .children-list-col {
                        float: left;
                        width: 265px;
                      }
                      .children-list {
                        height: 458px;
                        margin: 0;
                        padding: 2px 0;
                        list-style-type: none;
                        li {
                          position: relative;
                          float: left;
                          width: 265px;
                          height: 76px;
                          a {
                            display: block;
                            padding: 18px 20px;
                            line-height: 40px;
                            color: #333;
                            transform: color .3s;
                            &:hover {
                              text-decoration: none;
                              color: #ff7600;
                            }
                            .thumb {
                              float: left;
                              margin-right: 12px;
                              vertical-align: middle;
                            }
                          }
                        }
                      }
                    }
                    .children-col-4 {
                      width: 992px;
                      .children-list-col {
                        width: 248px;
                      }
                    }
                    .children-col-3 {
                      width: 795px;
                    }
                    .children-col-2 {
                      width: 530px;
                    }
                    .children-col-1 {
                      width: 265px;
                    }
                  }
                }
                .site-category-list-custom {
                  height: 420px;
                  border: 0;
                  color: #fff;
                  background-color: rgba(105, 101, 101, .6);
                  .title {
                    color: #fff;
                  }
                }
              }
            }
            .item-children {
              display: none;
              .container {
                position: relative;
                .children-list {
                  li {
                    a {
                      text-decoration: none;
                      color: #757575;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .header-search {
        position: relative;
        float: right;
        width: 296px;
        height: 50px;
        z-index: 20;
        margin-top: 25px;
        .search-text,
        .search-btn {
          position: absolute;
          top: 0;
          outline: none;
          border: 1px solid #e0e0e0;
          transition: all .2s;
        }
        .search-text {
          right: 51px;
          z-index: 1;
          width: 223px;
          height: 50px;
          padding: 0 10px;
          font-size: 14px;
          line-height: 50px;
          &:focus {
            border-color: #ff6700;
            & + .search-btn {
              border-color: #ff6700;
            }
            & ~ .fade-in {
              opacity: 0;
            }
          }
        }
        .search-btn {
          right: 0;
          z-index: 2;
          width: 52px;
          height: 50px;
          font-size: 16px;
          background-color: #fff;
          color: #616161;
          cursor: pointer;
          &:hover {
            background-color: #ff6700;
            color: #fff;
          }
        }
        .search-hot-words {
          position: absolute;
          top: 15px;
          right: 62px;
          z-index: 2;
          text-align: right;
          transition: opacity .2s;
          a {
            display: inline-block;
            margin-left: 5px;
            padding: 3px 5px;
            font-size: 12px;
            background-color: #eee;
            color: #757575;
            transition: all .2s;
            &:hover {
              background-color: #ff6700;
              color: #fff;
              text-decoration: none;
            }
          }
        }
        .fade-in {
          opacity: 1;
        }
      }
    }
    .header-nav-menu {
      &.slide-up {
        height: 0;
      }
      &.slide-down {
        height: 226px;
      }
      &.header-nav-menu-active {
        box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
      }
      position: absolute;
      top: 100px;
      left: 0;
      z-index: 24;
      width: 100%;
      height: 0;
      border-top: 1px solid #e0e0e0;
      background-color: #fff;
      overflow: hidden;
      transition: box-shadow .2s, height .3s;
      .container {
        position: relative;
        .children-list {
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 12px;
          li {
            position: relative;
            float: left;
            width: 180px;
            padding: 35px 12px 0;
            text-align: center;
            &:last-child {
              a {
                .figure {
                  border-right: 0 solid transparent;
                }
              }
            }
            a {
              text-decoration: none;
              color: #757575;
              .figure {
                width: 160px;
                height: 110px;
                border-right: 1px solid #eee;
                margin: 0 auto 16px;
                text-align: center;
                img {
                  width: 160px;
                  height: 110px;
                }
              }
              .title {
                margin: 0;
                line-height: 20px;
                color: #333;
              }
              .price {
                margin: 0;
                line-height: 20px;
                color: #ff6700;
              }
            }
          }
        }
      }
    }
  }
}
</style>
